﻿
var mapped = false;

function moveItem(listA, listB, item) {
    var flag = false;
    $.each(listB, function () {
        if (flag && this.name() === '') {
            this.selectedClass('selected');
            return false;
        }
        else if (this.selectedClass() === 'selected') {
            if (this.name() !== '') {
                listA.push({ name: ko.observable(this.name()), id: this.name(), disable: ko.observable(false), selectedClass: ko.observable('') });
            }
            this.name(item.name());
            this.selectedClass('');
            flag = true;
            listA.remove(item);
        }
    });
}

function saveColumnNames(param) {
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({ list: param }),
        dataType: "json",
        url: "/_layouts/ImportExamResult/ImportDiemThiPage.aspx/SaveColumns",
        success: function (msg) {
        },
        error: function (xmlHttpRequest) {
            var err = eval("(" + xmlHttpRequest.responseText + ")");
            alert(message + err.Message);
        }
    });
}

function loadColumnNames() {

    var button = this;

    if (!mapped) {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "/_layouts/ImportExamResult/ImportDiemThiPage.aspx/GetTableColumns",
            success: function (msg) {

                var data = msg.d;

                var vm = {
                    myItems: ko.observableArray([]),
                    mySelectedItems: ko.observableArray([]),
                    myCaptions: ko.observableArray([]),
                    clickItems: function () {
                        $.each(vm.myItems(), function () {
                            this.selectedClass('');
                        });
                        this.selectedClass('selected');
                    },
                    clickSelectedItems: function () {
                        $.each(vm.mySelectedItems(), function () {
                            this.selectedClass('');
                        });
                        this.selectedClass('selected');
                    },
                    next: function () {
                        moveItem(vm.myItems, vm.mySelectedItems(), this);
                    },
                    back: function () {
                        if (this.name() !== '') {
                            $.each(vm.myItems(), function () {
                                this.selectedClass('');
                            });
                            vm.myItems.push({ name: ko.observable(this.name()), id: this.name(), disable: ko.observable(false), selectedClass: ko.observable('') });
                            this.name('');
                        }
                    },
                    done: function () {
                        data.Items.splice(0, data.Items.length);
                        $.each(vm.myItems(), function () {
                            data.Items.push({ key: this.id, value: this.name() });
                        });
                        data.SelectedItems.splice(0, data.SelectedItems.length);
                        $.each(vm.mySelectedItems(), function () {
                            data.SelectedItems.push({ key: this.id, value: this.name() });
                        });
                        saveColumnNames(data.SelectedItems);
                        $(".modalOverlay").remove();
                        $('#popupMapField').slideUp('slow');
                    },
                    close: function () {

                        vm.myItems.removeAll();
                        $.each(data.Items, function () {
                            vm.myItems.push({ name: ko.observable(this.value), id: this.key, disable: ko.observable(false), selectedClass: ko.observable('') });
                        });

                        vm.mySelectedItems.removeAll();
                        var bSelected = true;
                        $.each(data.SelectedItems, function () {
                            if (bSelected && this.value === '') {
                                vm.mySelectedItems.push({ name: ko.observable(this.value), id: this.key, disable: ko.observable(false), selectedClass: ko.observable('selected') });
                                bSelected = false;
                            }
                            else {
                                vm.mySelectedItems.push({ name: ko.observable(this.value), id: this.key, disable: ko.observable(false), selectedClass: ko.observable('') });
                            }
                        });
                        $(".modalOverlay").remove();
                        $('#popupMapField').slideUp('slow');
                    }
                };

                $.each(data.Items, function () {
                    vm.myItems.push({ name: ko.observable(this.value), id: this.key, disable: ko.observable(false), selectedClass: ko.observable('') });
                });

                var bSelected = true;
                $.each(data.SelectedItems, function () {
                    if (bSelected && this.value === '') {
                        vm.mySelectedItems.push({ name: ko.observable(this.value), id: this.key, disable: ko.observable(false), selectedClass: ko.observable('selected') });
                        bSelected = false;
                    }
                    else {
                        vm.mySelectedItems.push({ name: ko.observable(this.value), id: this.key, disable: ko.observable(false), selectedClass: ko.observable('') });
                    }
                    vm.myCaptions.push({ name: this.caption, id: this.key, disable: ko.observable(false), selectedClass: ko.observable('') });
                });

                ko.applyBindings(vm);
            }
        });

        mapped = true;
    }

    $("body").append('<div class="modalOverlay">');
    //        $(".modalOverlay").click(function () {
    //            $(".modalOverlay").remove();
    //            $('.popup').slideUp('slow');
    //        });
    $('#popupMapField').slideDown('slow');
}